<template>
    <!-- html -->
    <div class="Prop">
        <ul>
            <li v-for="item in x.list" :key="item.id">{{ item.age }}-{{ item.name }}</li>
        </ul>
        <h3>{{x.xx}}</h3>
    </div>
</template>


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Prop'>
//接受父组件的参数
import { defineProps, withDefaults } from 'vue'
import { type Persions } from "@/types"

//接受父组件的参数
//接受list + 限制类型 + 限制必要性 + 使用默认值
let x = withDefaults(defineProps<{ list?: Persions, xx?: string }>(), {
    list: () => [
        { id: "1", name: "dada", age: 12 },
        { id: "2", name: "dada", age: 12 },
    ],
    xx: () => "耶耶"
})

//接受list + 限制类型 + 限制必要性
// let xx = defineProps<{ list?: Persions, xx?: string }>()

//不限制接受数据类型 使用方法 
// let xx = defineProps(["list","xx"])
// console.log(xx)

</script>

<style scoped>
/* 样式 */
.Prop {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>